<template>
  <basic-container>
    <div v-show="showSearchFlag" class="flex-start m-t-20 m-b-10">
      <div class="flex-center">
        <search-product-type class="m-r-10" @select="search.macType=$event.ids"></search-product-type>
        <search-online class="m-r-10" @select="search.online=$event.ids"></search-online>
        <el-input v-model="search.deviceName" class="m-r-10" placeholder="请输入设备号、主板号" size="small" @keyup.native.enter="query"
                  style="width: 300px;">
          <el-button slot="append" :loading="loading" icon="el-icon-search" size="small" type="primary" @click="query">
            查询
          </el-button>
        </el-input>
      </div>
    </div>
    <div class="flex-center m-b-10">
      <div></div>
      <div class="flex-center">
        <el-button :loading="loading" circle icon="el-icon-refresh" @click="query"></el-button>
        <el-button circle icon="el-icon-search" @click="showSearchFlag=!showSearchFlag"></el-button>
        <el-button type="primary" @click="showAddFlag=true">新增设备</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="data" :header-cell-style="{background:'#eee',color:'#000'}" border
              class="my-table"
              style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="60"/>
      <el-table-column label="设备序列号" width="200">
        <template v-slot="scope">{{ scope.row.macSn | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="主板号" width="200">
        <template v-slot="scope">{{ scope.row.deviceName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="设备类型" min-width="100">
        <template v-slot="scope">{{ (scope.row.macType && $store.state.dict.dictCache.mac_type[scope.row.macType])  | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="固件版本" min-width="100">
        <template v-slot="scope">{{ scope.row.firmwareVersion | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="100">
        <template v-slot="scope">{{ scope.row.createTime | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="客户名称" min-width="100">
        <template v-slot="scope">{{ scope.row.clientName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="绑定时间" min-width="100">
        <template v-slot="scope">{{ scope.row.bindTime | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="联网状态" min-width="100">
        <template v-slot="scope">{{ scope.row.online===1?'在线':'离线' | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="质检时间/人" min-width="100">
        <template v-slot="scope">
          <div v-if="scope.row.qcTime">
            <div>{{scope.row.qcTime}}</div>
            <div>{{scope.row.qcUserName}}</div>
          </div>
          <div v-else>{{ null | defaultValue }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template v-slot="scope">
          <el-button v-if="!scope.row.bindTime" icon="el-icon-edit" size="small" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-dropdown v-if="!scope.row.bindTime">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="toDetail(scope.row)">质检入库</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="showAddFlag" append-to-body title="新增设备" width="500px" destroy-on-close>
      <el-form label-width="120px">
        <el-form-item label="设备序列号">
          <el-input style="width: 200px" v-model="form.macSn" size="small"/>
        </el-form-item>
        <el-form-item label="主板号">
          <el-input style="width: 200px" v-model="form.deviceName" size="small"/>
        </el-form-item>
        <el-form-item label="设备类型">
          <search-product-type :show-title="false" :default-value="form.macType" @select="form.macType=$event.ids"></search-product-type>
        </el-form-item>
        <el-form-item label="是否是4G">
          <el-select style="width: 200px" v-model="form.is4g" size="small">
            <el-option :value="1"  label="是"/>
            <el-option :value="0"  label="否"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否带泵液">
          <el-select style="width: 200px" v-model="form.isPump" size="small">
            <el-option :value="1"  label="是"/>
            <el-option :value="0"  label="否"/>
          </el-select>
        </el-form-item>

      </el-form>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button size="small" @click="closeAddAndEdit">取消</el-button>
        <el-button :loading="submitLoading" size="small" type="primary" @click="doConfirm">确定</el-button>
      </div>
    </el-dialog>
    <div class="flex-center m-t-10">
      <div>在库：{{staticData.noSaleCount}}  激活：{{staticData.saleCount}}</div>
      <app-pagination ref="paginationRef" :page-size="page.size" :total="total" class="m-t-20" @change="pageChange"/>
    </div>
    <div class="h-100px"></div>
  </basic-container>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {
  equals,
  getRecords,
  getTotal,
  isListEmpty,
  isStringEmpty,
  msgError,
  isTrue,
  confirmWarning, msgSuccess
} from "@/util/common-util";
import AuthWrapper from "@/components/business/auth-wrapper";
import request from "@/router/axios";
import {deleteRecord} from "@/api/business/filling-team";
import SearchProduct from "@/components/SearchCondition/SearchProduct";
import SearchProductGroup from "@/components/SearchCondition/SearchProductGroup";
import AppFileUpload from "@/components/business/app-file-upload";
import SearchProductType from "@/components/SearchCondition/SearchProductType";
import SearchStatus from "@/components/SearchCondition/SearchStatus";
import {facmachineCount, facmachinePage, facmachineSubmit} from "@/api/product/mac";
import SearchOnline from "@/components/SearchCondition/SearchOnline";

export default {
  name: "DeviceList",
  components: {
    SearchOnline,
    SearchStatus,
    SearchProductType, AppFileUpload, SearchProductGroup, SearchProduct, AuthWrapper, AppPagination
  },
  data() {
    return {
      page: {
        size: 20,
        current: 1
      },
      total: 0,
      searchDate: '',
      search: {
        deviceName: '',
        macType: '',
        online: '',
      },
      form: {
        macSn: '',
        deviceName: '',
        macType: '',
        is4g: '',
        isPump: '',
      },
      showSearchFlag: true,
      loading: false,
      data: [{}],
      showAddFlag: false,
      submitLoading: false,
      isEdit: false,
      staticData: {
        noSaleCount: 0,
        saleCount: 0,
      }
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    handleSelect(arr) {
      this.$set(this, 'selectedMacs', arr)

      // this.$nextTick(() => {
      //   this.$refs.macMultipleTable.clearSelection()
      //   this.macList.forEach(row => {
      //     this.selectedMacs.forEach(item => {
      //       if(item.id === row.id) {
      //         this.$nextTick(() => {
      //           this.$refs.macMultipleTable.toggleRowSelection(row, true);
      //         })
      //       }
      //     })
      //   })
      //
      // })
    },
    handleUpload() {

    },
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    refresh() {
      this.$refs.paginationRef.reset()
    },
    query() {
      this.loading = true
      facmachinePage({...this.page, ...this.search}).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
      facmachineCount({ ...this.search}).then(res => {
        if(res.data.data) {
          this.staticData = res.data.data
        }
      })
    },
    addNew() {
      this.showAddFlag = true
    },
    doConfirm() {
      if (isStringEmpty(this.form.macSn)) return msgError("请输入设备序列号")
      if (isStringEmpty(this.form.deviceName)) return msgError("请输入主板号")
      if (isStringEmpty(this.form.macType)) return msgError("请选择设备类型")
      if (isStringEmpty(this.form.is4g)) return msgError("请选择是否是4G")
      if (isStringEmpty(this.form.isPump)) return msgError("请选择是否带泵液")
      this.submitLoading = true
      facmachineSubmit(this.form).then(res => {
        this.page.current = 1
        this.query()
        this.closeAddAndEdit()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    toDetail(row) {
      this.$emit('detail', row)
    },
    edit(row) {
      this.form = {...row}
      this.showAddFlag = true
    },
    closeAddAndEdit() {
      this.showAddFlag = false
      this.form.name = ''
      this.form.macSn = ''
      this.form.deviceName = ''
      this.form.macType = ''
      this.form.is4g = ''
      this.form.isPump = ''
      this.isEdit = false
    },
    toRemove(row) {
      confirmWarning('删除操作', `确定删除主机厂 ${row.name} ？`, () => {
        remove(row.id).then(res => {
          this.query()
          msgSuccess()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  /deep/ .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  /deep/ td {
    padding: 8px 0 !important;
  }
}
</style>
